<template>
  <div class="table-container">
      <el-table
        :key="tablekey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width:100%"
      >
        <el-table-column label="序号" prop="id"
          align="center"
          width="120px"
        >
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>    
        <el-table-column label="友链名称" width="120px" align="center">
          <template slot-scope="{row}">
             <span class="link-type" @click="handleUpdate(row)">{{ row. }}</span>
          </template> 
        </el-table-column>  
         <el-table-column label="友链链接" width="150px" align="center">
          <template slot-scope="{row}">
             <span class="link-type">{{ row.projectlink }}</span>
          </template> 
        </el-table-column>  
        <el-table-column label="项目图片" min-width="200px" align="center">
          <template slot-scope="{row}">
            <img :src="row.projectimg" alt="My Name is ZzA" width="400px" height="200px"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="170px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.createdAt | formtTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="170px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.updatedAt | formtTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230px"
        class-name="small-padding fixed-width"
        >
          <template  slot-scope="{row,$index}">
            <el-button type="primary" 
              size="mini" @click="handleUpdate(row)">
                编辑
            </el-button>
            <el-button v-if="row.status=='1'" 
              size="mini" type="danger" @click="handleUpdateStatus(row,'down')">
                下架
            </el-button>
            <el-button v-if="row.status=='0'" 
              size="mini" type="success" @click="handleUpdateStatus(row,'up')">
                上架
            </el-button>
            <el-button type="danger"
              size="mini" @click="handleDelete(row,$index)">
                删除
            </el-button>
          </template>
        </el-table-column>  
      </el-table>
  </div>
</template>

<script>
import { formtTime } from '@/utils/tools'
export default {
    name:'ProjectTable',
    props:{
      tablekey:Number,
      listLoading:Boolean,
      list:Array
    },
    filters:{
      formtTime
    },
    methods:{
      handleUpdate(row){
        this.$emit('handleUpdate',row)

      },
      handleDelete(row,index){
        this.$emit('handleDelete',row,index)
      },
      handleUpdateStatus(row,tar){
        this.$emit('handleUpdateStatus',row,tar)
      }
    }
}
</script>

<style>
.table-container{
    padding: 10px 20px 20px 20px;
}
</style>